<template>
  <!-- 导航栏 -->
  <div class="navbar bg-base-100 shadow-lg px-4 flex-none h-16">
            <div class="flex-1">
                <h1 class="text-xl font-bold">陕西信产 调试工具</h1>
            </div>
            <div class="flex-none gap-2">
                <div class="dropdown dropdown-end">
                    <label class="swap swap-rotate btn btn-ghost btn-circle">
                        <input type="checkbox"
                               :checked="currentTheme === 'dark'"
                               @change="toggleTheme"
                               class="theme-controller"/>
                        <!-- sun icon -->
                        <svg class="swap-on fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
                        <!-- moon icon -->
                        <svg class="swap-off fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
                    </label>
                </div>
            </div>
        </div>

        <main class="h-[calc(100vh-8rem)] container mx-auto px-4 py-2 overflow-hidden">
            <div class="flex gap-4 h-full">
                <!-- 左侧原始数据区域 -->
                <div class="w-1/2 flex flex-col">
                    <!-- 头部控制区 -->
                    <div class="bg-base-100 dark:bg-base-200 rounded-box shadow-lg dark:shadow-lg/20 p-4 mb-2 flex-none backdrop-blur-sm">
                        <div class="mb-4 flex items-center">
                            <label class="label w-20">
                                <span class="label-text dark:text-base-content/80">问题</span>
                            </label>
                            <input
                                type="text"
                                v-model="question"
                                placeholder="请输入问题"
                                class="input input-bordered w-full dark:bg-base-300 dark:border-base-content/10 dark:text-base-content/90 dark:placeholder-base-content/50"
                            >
                        </div>
                        <div class="flex space-x-2">
                            <button
                                @click="connect"
                                :disabled="isConnected"
                                class="btn btn-primary"
                            >
                                连接
                            </button>
                            <button
                                @click="disconnect"
                                :disabled="!isConnected"
                                class="btn btn-error"
                            >
                                断开
                            </button>
                            <button
                                @click="clearMessages"
                                class="btn btn-ghost"
                            >
                                清空
                            </button>
                        </div>
                    </div>

                    <!-- 消息展示区 -->
                    <div class="flex-1 flex flex-col min-h-0">
                        <h2 class="text-xl font-bold mb-1 dark:text-base-content/90">原始数据</h2>
                        <div class="flex-1 overflow-y-auto min-h-0 messages-container">
                            <div class="mockup-window bg-base-300 dark:bg-base-300/50 h-full flex flex-col backdrop-blur-sm">
                                <div class="flex-1 px-6 py-4 bg-base-200 dark:bg-base-200/50 overflow-y-auto">
                                    <div v-if="messages.length === 0" class="text-gray-400 dark:text-gray-500 text-center py-4">
                                        暂无消息
                                    </div>
                                    <div
                                        v-for="(message, index) in messages"
                                        :key="index"
                                        class="border-b border-base-200 last:border-0 py-3"
                                    >
                                        <div class="text-xs opacity-70 mb-1">{{ message.time }}</div>
                                        <pre class="mockup-code mt-2">{{ message.data }}</pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧推理过程和答案区域 -->
                <div class="w-1/2 flex flex-col gap-2 min-h-0">
                    <div class="flex-1 flex flex-col min-h-0">
                        <h2 class="text-xl font-bold mb-1">推理过程</h2>
                        <div ref="reasoningRef" class="flex-1 overflow-y-auto min-h-0">
                            <div class="mockup-window bg-base-300 h-full flex flex-col">
                                <div class="flex-1 px-6 py-4 bg-base-200 overflow-y-auto">
                                    {{ reasoningChain }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex-1 flex flex-col min-h-0">
                        <h2 class="text-xl font-bold mb-1">最终答案</h2>
                        <div ref="answerRef" class="flex-1 overflow-y-auto min-h-0">
                            <div class="mockup-window bg-base-300 h-full flex flex-col">
                                <div class="flex-1 px-6 py-4 bg-base-200 overflow-y-auto prose dark:prose-invert max-w-none" v-html="finalAnswer">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Footer -->
        <footer class="footer footer-center p-2 bg-base-300 dark:bg-base-300/50 text-base-content dark:text-base-content/70 flex-none h-12 backdrop-blur-sm">
            <aside class="flex items-center gap-2">
                <p>Powered by</p>
                <div class="flex items-center gap-1">
                    <span class="font-semibold">SXXC AI</span>
                </div>
            </aside>
        </footer>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import { marked } from 'marked'
const question = ref('')
const sseUrl = ref('http://127.0.0.1:8080/chat?prompt=')
const messages = ref([])
const isConnected = ref(false)
const currentTheme = ref('light')
const isInThinkTag = ref(false)
let eventSource = null
const reasoningRef = ref(null)
const answerRef = ref(null)

// 计算推理过程（思考链）
const reasoningChain = computed(() => {
  return messages.value
    .filter((m) => m.parsed?.reasoning_content)
    .map((m) => m.parsed.reasoning_content)
    .join('')
})

// 计算最终答案
const finalAnswer = computed(() => {
  const rawContent = messages.value
    .filter((m) => m.parsed?.content)
    .map((m) => m.parsed.content)
    .join('')
  return marked.parse(rawContent)
})

// 初始化主题
onMounted(() => {
  const savedTheme = localStorage.getItem('theme');
  currentTheme.value = savedTheme || 'light';
  document.documentElement.setAttribute('data-theme', currentTheme.value);
});

// 切换主题
const toggleTheme = () => {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
  localStorage.setItem('theme', currentTheme.value);
  document.documentElement.setAttribute('data-theme', currentTheme.value);
};

// 滚动到底部的函数
const scrollToBottom = (element) => {
  if (element) {
    // 获取实际的滚动容器（mockup-window 内的 overflow-y-auto 元素）
    const scrollContainer = element.querySelector('.overflow-y-auto');
    if (scrollContainer) {
      scrollContainer.scrollTop = scrollContainer.scrollHeight;
    }
  }
};

// 监听消息变化，自动滚动
watch(
  () => [messages.value.length, reasoningChain.value, finalAnswer.value],
  () => {
    nextTick(() => {
      if (reasoningRef.value) {
        scrollToBottom(reasoningRef.value);
      }
      if (answerRef.value) {
        scrollToBottom(answerRef.value);
      }
      // 滚动原始数据区域
      const messagesContainer = document.querySelector(
        '.messages-container .overflow-y-auto'
      );
      if (messagesContainer) {
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
      }
    });
  },
  { deep: true }
);

const parseSSEData = (data) => {
  try {
    const parsed = JSON.parse(data);

    // 检查是否直接返回了 reasoning_content
    const directReasoning = parsed.choices?.[0]?.delta?.reasoning_content;
    if (directReasoning) {
      return {
        id: parsed.id,
        created: parsed.created,
        model: parsed.model,
        reasoning_content: directReasoning,
        content: parsed.choices?.[0]?.delta?.content || ''
      };
    }

    const content = parsed.choices?.[0]?.delta?.content || '';

    // 处理 think 标签包裹的情况
    if (content.includes('<think>')) {
      isInThinkTag.value = true;
      const startIndex = content.indexOf('<think>') + '<think>'.length;
      return {
        id: parsed.id,
        created: parsed.created,
        model: parsed.model,
        reasoning_content: content.substring(startIndex),
        content: content.substring(0, content.indexOf('<think>'))
      };
    }

    if (content.includes('</think>')) {
      isInThinkTag.value = false;
      const endIndex = content.indexOf('</think>');
      return {
        id: parsed.id,
        created: parsed.created,
        model: parsed.model,
        reasoning_content: content.substring(0, endIndex),
        content: content.substring(endIndex + '</think>'.length)
      };
    }

    // 根据状态决定内容归属
    return {
      id: parsed.id,
      created: parsed.created,
      model: parsed.model,
      reasoning_content: isInThinkTag.value ? content : '',
      content: isInThinkTag.value ? '' : content
    };
  } catch (e) {
    console.error('解析JSON失败:', e);
    return null;
  }
};

const connect = () => {
  if (eventSource) {
    eventSource.close();
  }

  // 清空消息
  clearMessages();

  try {
    eventSource = new EventSource(sseUrl.value + question.value);
    isConnected.value = true;

    eventSource.onmessage = (event) => {
      const parsed = parseSSEData(event.data);
      messages.value.push({
        time: new Date().toLocaleTimeString(),
        data: event.data,
        parsed: parsed
      });
    };

    eventSource.onerror = (error) => {
      console.error('SSE Error:', error);
      disconnect();
    };
  } catch (error) {
    console.error('Connection Error:', error);
    disconnect();
  }
};

const disconnect = () => {
  if (eventSource) {
    eventSource.close();
    eventSource = null;
  }
  isConnected.value = false;
};

const clearMessages = () => {
  messages.value = [];
};

// return {
//   sseUrl,
//   messages,
//   isConnected,
//   currentTheme,
//   toggleTheme,
//   connect,
//   disconnect,
//   clearMessages,
//   reasoningChain,
//   finalAnswer,
//   reasoningRef,
//   answerRef,
// };
</script>
